import { ref } from 'vue'
import { defineStore } from 'pinia'
import { v4 as uuidv4 } from 'uuid';
import { getVerificationCode } from '@/apis/login'

export const useHomeStore = defineStore('counter', () => {
    const key = ref('')
    const loginDialogVisible = ref(false)
    const registerDialogVisible = ref(false)
    const verificationCodeImg = ref('')

    const setLoginDialogVisible = () => {
        isGetVerificationCode(loginDialogVisible.value)
        loginDialogVisible.value = !loginDialogVisible.value
    }
    const closeLoginDialogVisible = () => {
        loginDialogVisible.value = false
    }
    const setRegisterDialogVisible = () => {
        isGetVerificationCode(registerDialogVisible.value)
        registerDialogVisible.value = !registerDialogVisible.value
    }
    const closeRegisterDialogVisible = () => {
        registerDialogVisible.value = false
    }
    const getVerificationCodeImg = async () => {
        key.value = uuidv4()
        const data = await getVerificationCode(key.value)
        const blob = new Blob(<any>[data])
        verificationCodeImg.value = window.URL.createObjectURL(blob)
    }
    const isGetVerificationCode = (value: any) => {
        if (!value) {
            getVerificationCodeImg()
        }
    }

    return {
        key, loginDialogVisible, registerDialogVisible, verificationCodeImg, setLoginDialogVisible, setRegisterDialogVisible, getVerificationCodeImg, closeLoginDialogVisible, closeRegisterDialogVisible
    }
})
